<script type="text/javascript">
$(function(){
	// Tabs
	$('#tabs').tabs();
	
	//auto complete
	var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
	a = ["fff","ate","grg"];
	$("#uname").autocomplete(a, {matchContains: true});
	 
	function getParameters(formid) {
		var result = {};	
		jQuery.each($(formid + " .valid"), function(k, v) {
			result[v.name] = v.value;
		})
		return result;
	}

	
	/* 驗證表單欄位是否有效 */
	$("#userinfoform").validate({ 
		rules: {
			uname: {
				required: true, 
			},
			email: {
				required: true,
				email: true
			},
			url: {
				required: true,
				url: true
			}
		},
		messages: {
			uname: {
				required: " 請填入name"
			},
			email: {
				required: " 請填入email",
				email: " e-mail格式錯誤"
			},
			url: {
				required: " 請填入url",
				url: " 格式錯誤"
			}
		},
		submitHandler: function(form) {
			var params = getParameters("#userinfoform"); //取得分析後表單資料
            $.ajax({
				url: 'rest.php',
				type: 'post',
				data: params,
				beforeSend: function() {
					// 遮蓋畫面
					$.blockUI({
						  message: $('#loading'),
						  css: {
								border: 'none',
								padding: '15px',
								backgroundColor: '#000',
								'-webkit-border-radius': '10px',
								'-moz-border-radius': '10px',
								opacity: .5,
								color: '#fff'
						  }
					}); 
				},
				success: function(data) {
					$.unblockUI();
					//$("#tabs-2").append(data);
				},			
				error: function(data) {				
					$.unblockUI();
					//alert('ajax error!!');
				}
			});	        
        }
	})
});
</script>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">First</a></li>
		<li><a href="#tabs-2">Second</a></li>
		<!--li><a href="#tabs-3">Third</a></li!-->
	</ul>
	<div id="tabs-1">
		<form id="userinfoform">
			<table id="usertable">
				<tr>
					<th>name: </th>
					<td><input id="uname" name="uname" type="text"></td>
				</tr>
				<tr>
					<th>e-mail: </th>
					<td><input id="email" name="email" type="text"></td>
				</tr>
				<tr>
					<th>url: </th>
					<td><input id="url" name="url" type="text"></td>
				</tr>
				<tr>
					<td><input type="submit" value="Submit" /></td>
					<td><input type="reset" value="Reset" /></td>
				</tr>			
			</table>
		</form>
	</div>
	<div id="tabs-2">
		<!--iframe name="TOP1" src="http://tw.news.yahoo.com/"
			width="550" height="500" marginwidth="0" marginheight="0"
			border="0" frameborder="0" scrolling="yes">
		</iframe-->
	</div>
	<!--div id="tabs-3"></div-->
	
	<div id="loading" style="display: none;">
		傳送中請稍後 ...
	</div>
</div>
